<template>
  <section class="container">
    <div class="row">
      <div class="col">
        <b-alert show>钉钉服务器端api测试示例</b-alert>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <b-list-group>
          <b-list-group-item v-for="(x,i) of reqs" :key="i" @click="onItemClick(x)">{{x.name}}</b-list-group-item>
        </b-list-group>
      </div>
      <div class="col-sm-8">
        <b-card :title="selReq?selReq.name:'waiting'" :sub-title="res?res.options.url:''">
          <div class="card-text">
            <div class="json">{{res||'请选择想要测试的钉钉接口'}}</div>
          </div>
          <!-- <a href="#" class="card-link">Card link</a>
          <b-link href="#" class="card-link">Another link</b-link> -->
        </b-card>
        
      </div>
    </div>
  </section>
</template>

<script>
export default {
  async asyncData({ params, app }) {
    let {data}=await app.$api.get('/v1/apis')
    return { $api: app.$api,reqs:data.items};
  },
  data() {
    return {
      res: null,
      selReq:null
    };
  },
  methods: {
    async onItemClick(req) {
      this.selReq=req
      let { data } = await this.$api.get(req.uri);
      this.res = data.itemMap;
      this.$nextTick(() => {
        $(".json").JSONView(data.itemMap.info, {
          collapsed: true,
          recursive_collapser: true
        });
      });   
    }
  }
};
</script>

<style>
</style>
